<template>
	<div class="containerAll me-me">
		<div class="header">
			<p class="title"></p>
			<div class="titleBottom">
				<span class="headPortrait"><img src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/usr/wx/17621538788_1520925898032.jpg"/></span>
				<div class="balance">
					<div class="balanceNum">0.00</div>
					<div class="balanceTitle">账户余额</div>
					<img src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/rightarrows.png" />
				</div>
			</div>
		</div>
		<div class="contents">
			<div class="order" @click="toOrder">
				<img class="left" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/order_icon..png" />
				<span class="word">我的订单</span>
				<img class="right" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png" />
			</div>
			<div class="orderNoB" @click="toListAddress">
				<img class="left" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/addr_icon.png" />
				<span class="word">收货地址管理</span>
				<img class="right" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png" />
			</div>
		</div>
		<div class="contents">
			<div class="order" @click="toInstallment">
				<img class="left" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/sale_icon.png" />
				<span class="word">分期支付</span>
				<img class="right" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png" />
			</div>
		</div>
		<div class="contents">
			<div class="order" @click="toCoupon">
				<img class="left" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/coupon_icon.png" />
				<span class="word">我的优惠券</span>
				<img class="right" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png" />
			</div>
			<div class="orderNoB">
				<img class="left" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/addr_icon.png" />
				<span class="word">关于我们</span>
				<img class="right" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png" />
			</div>
		</div>
		<div class="contents">
			<div class="order" @click="isLogin($event,(isuserLogin ? 1:0))">
				<img class="left" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/getout.png" />
				<span class="word">{{isuserLogin ? '退出登录':'登录'}}</span>
			</div>
		</div>
		<hua-footer></hua-footer>
		<modal v-show='modalFlag' v-on:cancel='cancelClick' v-on:sure='sureClick'>
			<p slot='title' class="modalTitle">花伴商城</p>
			<p slot='info' class="modalInfo">确定要退出登录吗?</p>
		</modal>
	</div>
</template>

<script>
	import utils from '@/util/util'
	import Modal from '@/components/huabanShop/modal'
	import HuaFooter from '@/components/huabanShop/footer'
	export default {
		data() {
			return {
				isuserLogin: utils.getUserInfo(),
				modalFlag: false,
				userInfo: utils.getUserInfo()
			}
		},
		components: {
			Modal
			,HuaFooter
		},
		methods: {
			toListAddress() {
				if(!this.userInfo){
					this.$router.push({path:"/login",query:{'frompage':'/me'}});
					return;
				}
				this.$router.push("/list-address");
			},
			toOrder() {
				if(!this.userInfo){
					this.$router.push({path:"/login",query:{'frompage':'/me'}});
					return;
				}
				this.$router.push("/order");
			},
			toCoupon() {
				if(!this.userInfo){
					this.$router.push({path:"/login",query:{'frompage':'/me'}});
					return;
				}
				this.$router.push("/discount-coupon");
			},
			toInstallment() {
				this.$router.push("/installment");
			},
			isLogin(e, flag) {
				if(flag) {
					this.modalFlag = true;
				} else {
					this.$router.push({path:"/login",query:{frompege:'/me'}});
				}
			},
			cancelClick() {
				this.modalFlag = false;
			},
			sureClick() {
			     localStorage.removeItem('user_info')
			     sessionStorage.removeItem('plus_token')
				this.$router.push("/login");	
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	.me-me {
		height: 100%;
		background: #F2F2F2;
		.header {
			width: 100%;
			height: 3.08rem;
			background: #FBC200;
			position: relative;
			.title {
				position: relative;
				text-align: center;
				font-size: .32rem;
				color: #464646;
				height: .45rem;
				line-height: .45rem;
			}
			.titleBottom {
				width: 100%;
				height: 1.22rem;
				padding: .7rem 0;
				.headPortrait {
					display: inline-block;
					position: relative;
					top: -.18rem;
					width: 1.22rem;
					height: 1.22rem;
					border-radius: 1.22rem;
					background: #FFFFFF;
					margin-left: .39rem;
					img {
						width: 1.22rem;
						height: 1.22rem;
						border-radius: 1.22rem;
					}
				}
				.balance {
					display: inline-block;
					padding: .2rem .36rem;
					width: 5.09rem;
					position: absolute;
					right: 0;
					bottom: .8rem;
					.balanceNum {
						font-size: .48rem;
						color: #464646;
					}
					.balanceTitle {
						font-size: .3rem;
						color: #000000;
					}
					img {
						position: absolute;
						width: .5rem;
						height: .5rem;
						right: .16rem;
						top: .5rem;
					}
				}
			}
		}
		.contents {
			width: 7.14rem;
			padding: 0 0 0 .36rem;
			margin-top: .18rem;
			background: #FFFFFF;
			.order {
				border-bottom: 1px solid #F2F2F2;
			}
			.order,
			.orderNoB {
				height: 1rem;
				line-height: 1rem;
				position: relative;
				.left {
					width: .36rem;
					height: .36rem;
					position: absolute;
					left: 0;
					top: .3rem;
				}
				.word {
					margin-left: .54rem;
					font-size: .3rem;
					color: #464646;
				}
				.right {
					position: absolute;
					width: .4rem;
					height: .4rem;
					right: .2rem;
					top: .3rem;
				}
			}
		}
		.modalTitle {
			color: #464646;
			font-size: .32rem;
			font-weight: 500;
			text-align: center;
			height: .78rem;
			line-height: .78rem;
			padding-top: .23rem;
		}
		.modalInfo {
			color: #909090;
			font-size: .28rem;
			text-align: center;
			height: .74rem;
			line-height: .74rem;
			padding-bottom: .52rem;
		}
	}
</style>